<template>
	<div class="max">
		<div class="left section">
			<div class="topLeft section1">
				<dv-border-box-1 
					class="borderbox"
				>
					<dv-conical-column-chart
						class="columnar"
						:config="config"  
					/>
				</dv-border-box-1>
			</div>
			<div class="centreLeft section1">
			
			</div>
			<div class="belowLeft section1">

			</div>
		</div>
		<div class="center section">
			<div class="topCenter">

			</div>
		</div>

		<div class="right section">
			<div class="topRight">

			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			config: {
				data: [
					{
						name: '周口',
						value: 55
					},
					{
						name: '南阳',
						value: 120
					},
					{
						name: '西峡',
						value: 71
					},
					{
						name: '驻马店',
						value: 66
					},
					{
						name: '新乡',
						value: 80
					},
					{
						name: '信阳',
						value: 35
					},
					{
						name: '漯河',
						value: 15
					}
				],
				showValue: true,
				textColor:'black'
			}
		}
	},
};
</script>

<style scoped>
	.max {
		width: 100%;
		height: 100%;
		display: flex;
	}
	.section {
		margin: 5px;
		padding: 5px;
	}
	.section1 {
		margin: 2px;
	}
	.left {
		
		width: 30%;
	}
	.topLeft {
		box-sizing: border-box;
		width: 100%;
		height: 33%;
	}
	.centreLeft {
		box-sizing: border-box;
		width: 100%;
		height: 33%;
		border: 5px solid blue;
	}
	.belowLeft {
		box-sizing: border-box;
		width: 100%;
		height: 33%;
		border: 5px solid orange;
	}
	.center {
		box-sizing: border-box;
		background-color: orange;
		width: 40%;
	}
	.right {
		box-sizing: border-box;
		background-color: blue;
		width: 30%;
	}
	.borderbox >>> .border-box-content {
		display: flex;
		align-items: center;
    justify-content: center;
	}
	.columnar {
		width: 95%;
		height: 90%;
	}
</style>